<template>
  <div>
        <headerMiddle title="个人中心"/>
        <div class="profile" @click="editProfile">
            
            <img class="avatar" :src="usershuju.head_img" alt="">
            <div class="profile-middle">
                <div class="name">
                    <span v-if="usershuju.gender == 1" class="iconfont iconxingbienan"></span>
                     <span v-else class="iconfont iconxingbienv"></span>
                    {{usershuju.nickname}}
                </div>
                <div class="time">
                    2019-10-10
                </div>
            </div>
            <span class="iconfont iconjiantou1"></span>
        </div>
        <cellBar label="我的关注" desc="关注的用户" @jum="$router.push({path: '/myfollow'})"/>
        <cellBar label="我的跟帖" desc="跟帖/回复" @jum="$router.push({path: '/mycomments'})"/>
        <cellBar label="模块管理" @jum="$router.push({path: '/tabmanager'})"/>
        <cellBar label="我的收藏" desc="文章/视频" @jum="$router.push({path: '/mycollections'})"/>
        <cellBar label="设置" @jum="editProfile"/>
        <cellBar label="退出登录" @jum="login"/>
        
  </div>
</template>

<script>
// 引入组件
import cellBar from '../components/cellBar'
import headerMiddle from '../components/headerMiddle'
export default {
    // 注册组件
    components :{
        cellBar:cellBar,
        headerMiddle
    },
    data(){
       return {
           usershuju:{

        }
       }
        
       
    },
    methods: {
        jumPage(label){
            console.log('这是跳转' + label + '的页面')
        },
        // 点击跳转到编辑页面
        editProfile(){
            this.$router.push({
                name: 'editProfilePage'
            })
        },
        // 点击退出登录，跳转登录页面
        login(){
            // 删除本地储存token
            localStorage.removeItem('token');
            // 删除本地储存user_id
            localStorage.removeItem('user_id');
             // push 方法是跳转页面,会在浏览器留下记录,返回是,逐页返回
            // replace 方法可以替换掉当前页的记录
            // 因为点击退出登录后，页面跳到登录页面后，点击浏览器后退一步回到个人中心会触发阿贾克斯又跳回登录页面，后退一步失灵，所以使用replace 方法可以替换掉当前页的记录
            this.$router.replace({
                path: 'login'
            })
        }
    },
    mounted(){
        // 挂载完毕后发送阿贾克斯，获取个人中心的数据，赋值给this.usershuju这个对象
       this.$axios({
           url: '/user/'+localStorage.getItem('user_id'),
           method:'GET',
           headers:{
                Authorization: localStorage.getItem('token')
           }
       }).then(res=>{
           this.usershuju = res.data.data;
        //    console.log(this.usershuju)
        //    console.log(res)
        // 在渲染之前判断有没有图片，没有图片给个默认图片，有图片就处理图片地址加服务器地址加服务器返回的图片路径
        if(!this.usershuju.head_img){
            this.usershuju.head_img = '/static/imgs/touxian.jpg'
        }else{
            this.usershuju.head_img = this.$axios.defaults.baseURL + this.usershuju.head_img;
        }

       })
    }
}
</script>

<style lang="less" scoped>
 .profile{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding:8.333vw;
     border-bottom: 5px solid #eee;
     .avatar{
         width: 19.444vw;
        //  height: 19.444vw;
         border-radius: 50%

     }
     .profile-middle{
         flex: 1;
         padding-left: 2.778vw;
         font-size: 3.889vw;
         .time{
             font-size: 3.333vw;
             font-weight: 600;
             color: #a0a0a0;
             margin-top: 1.389vw
         }
         .iconfont{
             color: skyblue
         }
     }
     
 }
 
</style>